<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8"/>
        <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
        <title>
            满意度考核打分结果
        </title>
        <link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet prefetch"/>
        <link href="css/animate.min.css" rel="stylesheet prefetch"/>
        <link href="css/default.css" rel="stylesheet" type="text/css"/>
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,100,400,300,600,700,800" rel="stylesheet"/>
        <link href="css/styles.css?t=1201" rel="stylesheet" type="text/css"/>
        <link href="css/bootstrap-stars.css?t=1201" rel="stylesheet" type="text/css"/>
        <style type="text/css">
        	.thanks li{
        		
				margin:0.5em 0.8em;
				list-style: none;
        	}
        	[v-cloak] {
			  display: none;
			}
        </style>
    </head>
    <body>
        <div class="covering">
        	<header class="">
                <h1 class="h1-header animated bounceInLeft" style="position:relative;">
                   满意度考核人员管理
                </h1>
            </header>
            <div class="container-fluid table-class">
	            <div class="row">
	            	<div class="col-xs-12">
			            <div id="todo-list-example" style="margin:1em;">
						  <input
						    v-model="newTodoText"
						    v-on:keyup.enter="addNewTodo"
						    placeholder="Add a todo"
						    style="color:black;"
						  >
						  <ul style="margin-top:0.5em;">
						    <li
						      is="todo-item"
						      v-for="(todo, index) in todos"
						      v-bind:key="todo.code"
						      v-bind:title="todo.name"
						      v-on:remove="remove(todo)"
						    ></li>
						  </ul>
						</div>
		            </div>
		        </div>
			</div>
			
        </div>
    </body>
</html>

<script src="js/jquery-2.1.1.min.js">
</script>
<script src="js/vue.min.js"></script>
<script src="js/jquery.barrating.js">
</script>
<script>
    $.ajaxSetup({
	  //如果服务端是用对象接收json
	  contentType : 'application/json'
	 });
    Vue.component('todo-item', {
   	  template: '\
   	    <li>\
   	      {{ title }}\
   	      <button v-on:click="$emit(\'remove\')" style="color:black;">X</button>\
   	    </li>\
   	  ',
   	  props: ['title']
   	})

    	new Vue({
    	  el: '.covering',
    	  data: {
    	    newTodoText: '',
    	    todos: [],
    	   
    	  },
    	  mounted:function(){
    		  var _this=this;
    		  $.get("/workers").then(function(resp){
    			  _this.todos=resp.items;
    		  })
    	  },
    	  methods: {
    	    addNewTodo: function () {
    	    	var _this=this;
    	    	if(this.newTodoText==''){
    	    		alert("姓名不可为空！");
    	    		return;
    	    	}
    	    	$.ajax({
    	    		url:"/worker",
    	    		type:"POST",
    	    		data:JSON.stringify({name:this.newTodoText})
    	    	}).then(function(resp){
    	    		_this.todos.push(resp.itemMap.worker)
    	    	})
    	      	this.newTodoText = ''
    	    },
    	    remove:function(todo){
    	    	var _this=this;
    	    	$.ajax({
    	    		url:"/worker",
    	    		type:"DELETE",
    	    		data:JSON.stringify(todo)
    	    	}).then(function(resp){
    	    		var index=-1;
    	    		for(var i=0;i<_this.todos.length;i++){
    	    			if(_this.todos[i].code==todo.code){
    	    				index=i;
    	    				break;
    	    			}
    	    		}
    	    		_this.todos.splice(index,1);
    	    	})
    	    }
    	  }
    	})

</script>
